<script setup lang="ts">
import { ref } from 'vue';
import type { FormOptionList } from '@/types/form-option'; // 导入表单配置项类型
import type { FormInstance } from 'element-plus'; // 导入 Element Plus 表单实例类型
import type { PropType } from 'vue'; // 导入 Vue 的 ref 和 PropType

// 表格搜索组件

// 定义组件的 props
const props = defineProps({
  // 搜索表单的数据模型
  query: {
    type: Object,
    required: true,
  },
  // 表单配置项列表
  options: {
    type: Array as PropType<Array<FormOptionList>>,
    required: true,
  },
  // 搜索回调函数
  search: {
    type: Function,
    default: () => {},
  },
});

// 获取表单实例引用
const searchRef = ref<FormInstance>();

// 重置表单函数
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return;
  }
  // 重置表单字段
  formEl.resetFields();
  // 执行搜索回调
  props.search();
};

// 处理清除操作，相当于重置功能
const handleClear = () => {
  // 执行搜索回调（空查询相当于重置）
  props.search();
};

// 处理搜索函数，对输入框内容进行trim处理
const handleSearch = () => {
  // 遍历查询对象，对字符串类型的值进行trim处理
  Object.keys(props.query).forEach(key => {
    if (typeof props.query[key] === 'string') {
      props.query[key] = props.query[key].trim();
    }
  });

  // 执行搜索回调
  props.search();
};
</script>

<template>
  <div class="search-container">
    <!-- 搜索表单 -->
    <el-form ref="searchRef" :model="query" :inline="true">
      <!-- 遍历配置项生成表单控件 -->
      <el-form-item :label="item.label" :prop="item.prop" v-for="item in options">
        <!-- 文本输入框 -->
        <el-input
          v-if="item.type === 'input'"
          :placeholder="item.placeholder"
          :maxLength="20"
          v-model="query[item.prop]"
          :disabled="item.disabled"
          clearable
          style="width: 200px"
          @clear="handleClear"
        ></el-input>

        <!-- 下拉选择框 -->
        <el-select
          v-else-if="item.type === 'select'"
          v-model="query[item.prop]"
          :placeholder="item.placeholder"
          clearable
          :disabled="item.disabled"
        >
          <!-- 下拉选项 -->
          <el-option
            v-for="opt in item.opts"
            :key="opt.value"
            :label="opt.label"
            :value="opt.value"
          ></el-option>
        </el-select>

        <!-- 日期选择器 -->
        <el-date-picker
          v-else-if="item.type === 'date'"
          type="date"
          v-model="query[item.prop]"
          :format="item.format"
          clearable
        ></el-date-picker>
      </el-form-item>

      <!-- 操作按钮组 -->
      <el-form-item>
        <!-- 搜索按钮 -->
        <el-button type="primary" @click="handleSearch">
          <el-icon><Search /></el-icon>
          <span>搜索</span>
        </el-button>
        <!-- 重置按钮 -->
        <el-button @click="resetForm(searchRef)">
          <el-icon><Refresh /></el-icon>
          <span>重置</span>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.search-container {
  padding: 20px 30px 0;
  background-color: #fff;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
